<template>
  <div id="main" style="height:25vh"></div>
</template>

<script>
/* eslint-disable no-undef */
require('../../static/weishidataview/echarts-all')
export default {
  name: 'TwOldChart',
  mounted () {
    this.resizeChart()
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    resizeChart () {
      let myChart = echarts.init(document.getElementById('main'))
      let option = {
        color: ['#09f6ff', '#b79fd9', '#2bc3e2', '#eeaf87', '#d15b70', '#4c6aff'],
        calculable: false,
        tooltip: {
          formatter: (params) => {
            switch (params[1]) {
              case '幼儿园': {
                return `${params[1]}<br />人数: 133045`
              }
              case '小学': {
                return `${params[1]}<br />人数: 155044`
              }
              case '初中': {
                return `${params[1]}<br />人数: 117579`
              }
              case '高中': {
                return `${params[1]}<br />人数: 48463`
              }
              case '中专': {
                return `${params[1]}<br />人数: 47251`
              }
            }
          }
        },
        series: (function () {
          let series = []
          for (let i = 0; i < 20; i++) {
            series.push({
              name: '学生人数',
              type: 'pie',
              itemStyle: {
                normal: {
                  label: {show: i > 18,
                    textStyle: {
                      fontSize: 18
                    }},
                  labelLine: {show: i > 18, length: 20}
                }
              },
              radius: [i * 4 + 10, i * 4 + 13],
              data: [
                {value: i * 90 + 80, name: '幼儿园'},
                {value: i * 80 + 160, name: '小学'},
                {value: i * 50 + 320, name: '初中'},
                {value: i * 10 + 340, name: '高中'},
                {value: i * 8 + 380, name: '中专'}
              ]
            })
          }
          // series[0].markPoint = {
          //   symbol: 'emptyCircle',
          //   symbolSize: series[0].radius[0],
          //   effect: {show: true, scaleSize: 12, color: 'rgba(250,225,50,0.8)', shadowBlur: 10, period: 30},
          //   data: [{x: '50%', y: '50%'}]
          // }
          return series
        })()
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
